import React from 'react';
import {Card} from 'antd';
import {Chart, Geom, Axis, Tooltip, Legend, Coord} from 'bizcharts';

class Bar extends React.Component {

  render() {
    const {data} = this.props;
    // const data = [
    //   { name: 'AAA', score: 275},
    //   { name: 'BBB', score: 115},
    //   { name: 'CCC', score: 120},
    //   { name: 'DDD', score: 350},
    // ];
    // var imageMap = {
    //   'AAA': 'https://zos.alipayobjects.com/rmsportal/mYhpaYHyHhjYcQf.png',
    //   'BBB': 'https://zos.alipayobjects.com/rmsportal/JBxkqlzhrlkGlLW.png',
    //   'CCC': 'https://zos.alipayobjects.com/rmsportal/zlkGnEMgOawcyeX.png',
    //   'DDD': 'https://zos.alipayobjects.com/rmsportal/KzCdIdkwsXdtWkg.png'
    // };

    const scale = {
      score: {alias: '分数'},
      score: {alias: '选手姓名'}
    };

    return (
      <Card
        title='统计'
        bordered={false}
        hoverable
      >
        <Chart forceFit height={400} data={data} scale={scale}>
          <Axis name="name"/>
          <Axis name="score"/>
          <Tooltip/>
          <Geom type="interval" position="name*score" color="name"/>
          {/*<Geom type='point' position="name*score" size={20} shape={['name', function (data) {*/}
          {/*return ['image', 'https://zos.alipayobjects.com/rmsportal/KzCdIdkwsXdtWkg.png'];*/}
          {/*}]} />*/}
        </Chart>
      </Card>
    );
  }
}

Bar.propTypes = {};

export default Bar;
